<template>
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
				<view class="info">
					<text class="nickname">用户昵称</text>
					<text class="status" :class="{ verified: isVerified }" @tap="goToVerify">
						{{ isVerified ? '已认证' : '未认证' }}
					</text>
				</view>
			</view>
			<view class="user-stats">
				<view class="stat-item">
					<text class="num">12</text>
					<text class="label">发布订单</text>
				</view>
				<view class="stat-item">
					<text class="num">8</text>
					<text class="label">接受订单</text>
				</view>
				<view class="stat-item">
					<text class="num">4.8</text>
					<text class="label">信用评分</text>
				</view>
			</view>
		</view>
		
		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-group">
				<view class="menu-item" @tap="goToWallet">
					<view class="left">
						<uni-icons type="wallet" size="20" color="#2979ff"></uni-icons>
						<text>我的钱包</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view class="menu-item" @tap="goToAddress">
					<view class="left">
						<uni-icons type="location" size="20" color="#2979ff"></uni-icons>
						<text>收货地址</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
			
			<view class="menu-group">
				<view class="menu-item" @tap="goToVerify">
					<view class="left">
						<uni-icons type="person" size="20" color="#2979ff"></uni-icons>
						<text>身份认证</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view class="menu-item" @tap="goToFeedback">
					<view class="left">
						<uni-icons type="help" size="20" color="#2979ff"></uni-icons>
						<text>意见反馈</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
			
			<view class="menu-group">
				<view class="menu-item" @tap="goToAbout">
					<view class="left">
						<uni-icons type="info" size="20" color="#2979ff"></uni-icons>
						<text>关于我们</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
			
			<view class="menu-group">
				<view class="menu-item" @tap="logout">
					<view class="left">
						<uni-icons type="poweroff" size="20" color="#2979ff"></uni-icons>
						<text>退出登录</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view class="menu-item" @tap="goToSettings">
					<view class="left">
						<uni-icons type="gear" size="20" color="#2979ff"></uni-icons>
						<text>设置</text>
					</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isVerified: false
		}
	},
	methods: {
		goToWallet() {
			uni.navigateTo({
				url: '/pages/wallet/wallet'
			})
		},
		goToAddress() {
			uni.navigateTo({
				url: '/pages/my/address'
			})
		},
		goToVerify() {
			uni.navigateTo({
				url: '/pages/my/verify'
			})
		},
		goToFeedback() {
			uni.navigateTo({
				url: '/pages/feedback/feedback'
			})
		},
		goToAbout() {
			uni.navigateTo({
				url: '/pages/about/about'
			})
		},
		goToSettings() {
			uni.navigateTo({
				url: '/pages/settings/settings'
			})
		},
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						uni.removeStorageSync('token')
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: $background-color;
}

.user-card {
	background-color: #fff;
	padding: 40rpx 30rpx;
	margin-bottom: 20rpx;
	
	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			margin-right: 30rpx;
		}
		
		.info {
			.nickname {
				font-size: 36rpx;
				color: $text-color;
				font-weight: bold;
				margin-bottom: 10rpx;
				display: block;
			}
			
			.status {
				font-size: 24rpx;
				color: #ff5500;
				background-color: rgba(#ff5500, 0.1);
				padding: 4rpx 12rpx;
				border-radius: 4rpx;
				display: inline-block;
				
				&.verified {
					color: #07c160;
					background-color: rgba(#07c160, 0.1);
				}
			}
		}
	}
	
	.user-stats {
		display: flex;
		justify-content: space-around;
		
		.stat-item {
			text-align: center;
			
			.num {
				font-size: 36rpx;
				color: $text-color;
				font-weight: bold;
				margin-bottom: 10rpx;
				display: block;
			}
			
			.label {
				font-size: 24rpx;
				color: $text-color-grey;
			}
		}
	}
}

.menu-list {
	.menu-group {
		background-color: #fff;
		margin-bottom: 20rpx;
		
		.menu-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid $border-color;
			
			&:last-child {
				border-bottom: none;
			}
			
			.left {
				display: flex;
				align-items: center;
				
				text {
					font-size: 28rpx;
					color: $text-color;
					margin-left: 20rpx;
					
					&.logout {
						color: #ff5500;
					}
				}
			}
		}
	}
}
</style> 